import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Table, Form, Popover} from 'antd';
import {formatAmount} from '../utils';
import {TABLE, FIXED_COLUMN_WIDTH} from '../constants';
import {formatMessage} from './intl';
import LocalizeInputNumber from '../common/LocalizeInputNumber';
import WrappedPopconfirm from '../common/WrappedPopconfirm';
import {sortPartAndCategory} from './utils';
const FormItem = Form.Item;
class WorkItemTablePanel extends PureComponent {
    state = {
        showSelectPartPanel: false,
        selectedRowKeys: []
    }
    affixOnChange = () => this.forceUpdate();
    
    onDeleteWorkItem = id => {
        this.props.onDeleteWorkItem(id);
    };
    onWorkItemLaborHourChange = (value, id) => {
        this.props.onWorkItemLaborHourChange(id, value);
    };
    onWorkItemLaborPriceChange = (value, id) => {
        this.props.onWorkItemLaborPriceChange(id, value);
    };
    onSelectedChange = keys => this.setState({
        selectedRowKeys: keys
    });
    onDeleteAll = () => {
        this.props.onDeleteAllWorkItem();
    }
    render() {
        // const {data} = this.props;
        const data = this.props.data.sort(sortPartAndCategory);
        const columns = [
            {
                title: formatMessage({
                    id: 'workItemDetailPanel.usedPartCode',
                    defaultMessage: '备件编号'
                }),
                dataIndex: 'usedPartCode',
                render: (text, r) => (<Popover content={r.partProductCategoryCodes} title={formatMessage({
                    id: 'workItemDetailPanel.partProductCategoryCodes',
                    defaultMessage: '车型'
                })}>
                    {text}
                </Popover>)
            }, {
                title: formatMessage({
                    id: 'workItemDetailPanel.workItemCode',
                    defaultMessage: '维修项目编号'
                }),
                dataIndex: 'workItemCode'
            },
            {
                title: formatMessage({
                    id: 'workItemDetailPanel.workItemName',
                    defaultMessage: '维修项目名称'
                }),
                dataIndex: 'workItemName'
            },
            {
                title: formatMessage({
                    id: 'workItemDetailPanel.productCategoryCode',
                    defaultMessage: '车型'
                }),
                dataIndex: 'productCategoryCode'
            },
            {
                title: formatMessage({
                    id: 'workItemDetailPanel.laborHour',
                    defaultMessage: '工时'
                }),
                dataIndex: 'laborHour',
                render: (text, record) => {
                    const validate = (text === null || text === undefined) ? {validateStatus: 'error'} : null;
                    return (
                        <FormItem {...validate}>
                            <LocalizeInputNumber
                                min={0}
                                id={record.id}
                                precision={2}
                                value={text} onBlur={this.onWorkItemLaborHourChange}/>
                        </FormItem>
                    );
                }
            },
            {
                title: formatMessage({
                    id: 'workItemDetailPanel.laborPrice',
                    defaultMessage: '工时单价'
                }),
                dataIndex: 'laborPrice',
                render: (text, record) => {
                    const validate = (!text || text === undefined) ? {validateStatus: 'error'} : null;
                    return (
                        <FormItem {...validate}>
                            <LocalizeInputNumber
                                min={0}
                                id={record.id}
                                precision={2}
                                value={text} onBlur={this.onWorkItemLaborPriceChange}/>
                        </FormItem>
                    );
                }
            },
            {
                title: formatMessage({
                    id: 'workItemDetailPanel.laborFee',
                    defaultMessage: '工时费'
                }),
                dataIndex: 'laborFee',
                render: text => formatAmount(text)
            },
            {
                title: formatMessage({
                    id: 'workItemDetailPanel.remark',
                    defaultMessage: '备注'
                }),
                dataIndex: 'remark'
            }
        ];
        columns.push({
            title: data.length ? (
                <WrappedPopconfirm
                    id="delete"
                    title={formatMessage({
                        id: 'workItemDetailPanel.popconfirm.message',
                        defaultMessage: '是否继续?'
                    })}
                    okText={formatMessage({
                        id: 'workItemDetailPanel.popconfirm.confirm',
                        defaultMessage: '确认'
                    })}
                    cancelText={formatMessage({
                        id: 'workItemDetailPanel.popconfirm.cancel',
                        defaultMessage: '取消'
                    })}
                    onConfirm={this.onDeleteAll}>
                    <a>
                        {formatMessage({
                            id: 'workItemDetailPanel.deleteAll',
                            defaultMessage: '清空'
                        })}
                    </a>
                </WrappedPopconfirm>
            ) : (
                <a>
                    {formatMessage({
                        id: 'add.deleteAll',
                        defaultMessage: '清空'
                    })}
                </a>),
            dataIndex: 'id',
            fixed: 'right',
            width: FIXED_COLUMN_WIDTH,
            render: text => (
                <a data-id={text} onClick={() => this.onDeleteWorkItem(text)}>
                    {formatMessage({
                        id: 'btn.delete',
                        defaultMessage: '删除'
                    })}
                </a>)
        });
        return (
            <div>
                <Table
                    className="white-space-nowrap"
                    rowKey="id"
                    columns={columns}
                    pagination={false}
                    dataSource={data}
                    {...TABLE}/>
            </div>
        );
    }
}

WorkItemTablePanel.propTypes = {
    data: PropTypes.array,
    page: PropTypes.string,
    onDeleteAllWorkItem: PropTypes.func,
    onDeleteWorkItem: PropTypes.func,
    onWorkItemLaborHourChange: PropTypes.func,
    onWorkItemLaborPriceChange: PropTypes.func,
};

export default WorkItemTablePanel;
